import { defineComponent, markRaw, ref, nextTick } from 'vue'
import DataNode from '../../ItemNode/DataNode'
import { ElButton, ElColorPicker, ElInput, ElSwitch, ElTag, ElText } from 'element-plus'
import classes from '../../ItemNode/ItemNode.module.css'
import LineChart from './LineChart.vue'
import LineChartRaw from './LineChart.vue?raw'
import { Minus, Plus } from '@element-plus/icons-vue'
export default class NLineChart extends DataNode {
  isNLineChart = true
  isChartNode = true

  constructor(node?: NLineChart) {
    super(node)

    if (!node) {
      this.path = './components/NLineChart/NLineChart.tsx'
      this.name = '折线图'

      const style = this.props.style
      this.props.style = {
        ...style,
        width: '300px',
        height: '200px',
        flexShrink: '0'
      }

      this.props.dataUrl = ''
      this.props.dataFn = `function () {
  return [
    {
      product: 'defaultA',
      default1: 2,
      default2: 1
    },
    {
      product: 'defaultB',
      default1: 5,
      default2: 3
    },
    {
      product: 'defaultC',
      default1: 4,
      default2: 2
    },
    {
      product: 'defaultD',
      default1: 6,
      default2: 4
    }
  ]
}`

      this.props.autoAction = false

      this.props.option = {
        color: ['#5af', '#fa5'],
        colorLinear: false,
        areaStyle: false,
        smooth: false,
        showSymbol: true,
        axisLabelColor: '#333',
        legendTextStyleColor: '#333',
        seriesLabelShow: false,
        seriesLabelColor: '#333',
        yAxisName: '',
        datasetDimensions: ['default1', 'default2'],
        datasetSourceProduct: 'product'
      }
    }

    const pComponent = this.component
    this.component = markRaw(
      defineComponent(
        (props) => {
          return () => (
            <pComponent>
              <LineChart
                option={this.props.option}
                data={this.props.data ?? []}
                autoAction={this.props.autoAction}
              ></LineChart>
            </pComponent>
          )
        },
        {
          name: 'NLineChart'
        }
      )
    )

    const pView = this.view
    this.view = markRaw(
      defineComponent((props) => {
        this.props.data = [
          {
            product: 'defaultA',
            default1: 2,
            default2: 1
          },
          {
            product: 'defaultB',
            default1: 5,
            default2: 3
          },
          {
            product: 'defaultC',
            default1: 4,
            default2: 2
          },
          {
            product: 'defaultD',
            default1: 6,
            default2: 4
          }
        ]

        return () => (
          <pView>
            <this.component style={{ transform: 'scale(0.35, 0.3)' }}></this.component>
          </pView>
        )
      })
    )

    const pParams = this.params
    this.params = markRaw(
      defineComponent(() => {
        const dimensionRef = ref()
        const dimensionVisible = ref(false)
        const dimensionValue = ref()

        return () => (
          <pParams>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                系列名字段
              </ElText>
              <div class={classes['params-item-content']}>
                {this.props.option.datasetDimensions.map((tag) => (
                  <ElTag
                    key={tag}
                    closable
                    type="primary"
                    effect="dark"
                    size="small"
                    onClose={() => {
                      const dimensions = this.props.option.datasetDimensions
                      dimensions.splice(dimensions.indexOf(tag), 1)
                    }}
                  >
                    {tag}
                  </ElTag>
                ))}
                {dimensionVisible.value ? (
                  <ElInput
                    ref={dimensionRef}
                    v-model={dimensionValue.value}
                    size="small"
                    style={{ width: '80px' }}
                    onBlur={() => {
                      if (dimensionValue.value)
                        this.props.option.datasetDimensions.push(dimensionValue.value)
                      dimensionValue.value = ''
                      dimensionVisible.value = false
                    }}
                  ></ElInput>
                ) : (
                  <ElButton
                    onClick={() => {
                      dimensionVisible.value = true
                      nextTick(() => {
                        dimensionRef.value!.input!.focus()
                      })
                    }}
                    type="warning"
                    size="small"
                    circle
                    icon={Plus}
                  ></ElButton>
                )}
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                x坐标轴字段
              </ElText>
              <div class={classes['params-item-content']}>
                <ElInput
                  modelValue={this.props.option.datasetSourceProduct}
                  onUpdate:modelValue={(v) => (this.props.option.datasetSourceProduct = v || '')}
                  size="small"
                ></ElInput>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                y坐标轴名
              </ElText>
              <div class={classes['params-item-content']}>
                <ElInput
                  modelValue={this.props.option.yAxisName}
                  onUpdate:modelValue={(v) => (this.props.option.yAxisName = v || '')}
                  size="small"
                ></ElInput>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                坐标轴字色
              </ElText>
              <div class={classes['params-item-content']}>
                <ElColorPicker
                  modelValue={this.props.option.axisLabelColor}
                  onUpdate:modelValue={(v) => (this.props.option.axisLabelColor = v || '')}
                  show-alpha
                  size="small"
                  teleported={false}
                ></ElColorPicker>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                图例字色
              </ElText>
              <div class={classes['params-item-content']}>
                <ElColorPicker
                  modelValue={this.props.option.legendTextStyleColor}
                  onUpdate:modelValue={(v) => (this.props.option.legendTextStyleColor = v || '')}
                  show-alpha
                  size="small"
                  teleported={false}
                ></ElColorPicker>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                调色盘
              </ElText>
              <div class={classes['params-item-content']}>
                {this.props.option.color.map((c, index) => (
                  <ElColorPicker
                    modelValue={this.props.option.color[index]}
                    onUpdate:modelValue={(v) => (this.props.option.color[index] = v || '')}
                    show-alpha
                    size="small"
                    teleported={false}
                  ></ElColorPicker>
                ))}
                <ElButton
                  type="primary"
                  icon={Plus}
                  circle
                  onClick={() => this.props.option.color.push('#5af')}
                  size="small"
                ></ElButton>
                <ElButton
                  type="danger"
                  icon={Minus}
                  circle
                  onClick={() => this.props.option.color.pop()}
                  size="small"
                ></ElButton>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                调色盘线性渐变
              </ElText>
              <div class={classes['params-item-content']}>
                <ElSwitch
                  modelValue={this.props.option.colorLinear}
                  onUpdate:modelValue={(v) => (this.props.option.colorLinear = v)}
                  size="small"
                ></ElSwitch>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                区域填充
              </ElText>
              <div class={classes['params-item-content']}>
                <ElSwitch
                  modelValue={this.props.option.areaStyle}
                  onUpdate:modelValue={(v) => (this.props.option.areaStyle = v)}
                  size="small"
                ></ElSwitch>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                平滑
              </ElText>
              <div class={classes['params-item-content']}>
                <ElSwitch
                  modelValue={this.props.option.smooth}
                  onUpdate:modelValue={(v) => (this.props.option.smooth = v)}
                  size="small"
                ></ElSwitch>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                显示圆标
              </ElText>
              <div class={classes['params-item-content']}>
                <ElSwitch
                  modelValue={this.props.option.showSymbol}
                  onUpdate:modelValue={(v) => (this.props.option.showSymbol = v)}
                  size="small"
                ></ElSwitch>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                轮流选择
              </ElText>
              <div class={classes['params-item-content']}>
                <ElSwitch v-model={this.props.autoAction} size="small"></ElSwitch>
              </div>
            </div>
          </pParams>
        )
      })
    )
  }

  toVue(): SfcObj {
    const sfcObj = super.toVue()
    const name = sfcObj.name
    const dataVar = sfcObj.dataVar
    const [uuid0, uuid1] = this.uuid.split('-')
    const optionVar = `${name}_${uuid0}_option`

    const optionStr = JSON.stringify(this.props.option)

    sfcObj.imports = {
      ...sfcObj.imports,
      vue: {
        ...sfcObj.imports.vue,
        ref: 'ref'
      },
      ['./imports/LineChart.vue']: {
        default: 'LineChart'
      }
    }

    sfcObj.importFiles = {
      ...sfcObj.importFiles,
      'LineChart.vue': LineChartRaw
    }

    sfcObj.script = `
${sfcObj.script}
const ${optionVar} = ref(${optionStr})
      `

    sfcObj.template = sfcObj.template.replace(
      '<slot></slot>',
      `
  <LineChart :option="${optionVar}" :data="${dataVar}" :autoAction="${this.props.autoAction}"></LineChart>
      `
    )

    return sfcObj
  }
}
